<!--
 * @Date: 2023-02-22 13:39:23
 * @LastEditors: “mengqc1995” “mengqc1995@163.com”
 * @LastEditTime: 2023-07-12 14:01:58
 * @FilePath: \sososn-web-new\src\components\chatService.vue
-->
<template>
  <div class="chatService">
    <div class="chatService-wapper flex-col">
      <div class="chatService-header items-center justify-between">
        <div class="left-title items-center">
          <el-image :src="$getAssetsImages('title-icon.png')" class="title-icon" />
          <p class="text-title">链盈智能客服正在为您服务</p>
        </div>
        <div class="right-box" @click="closePage">
          <span class="btn-text">结束沟通</span>
        </div>
      </div>
      <el-scrollbar ref="scrollbarRef" :always="true" height="471px">
        <div class="chatService-body flex-col">
          <p class="text-title">{{ newDate }}开始沟通</p>
          <div class="font-facing-info">
            <p class="text-user">链盈智能客服</p>
            <div class="msg-info">
              <p class="info-text1">
                您好！我是平台客服助手。
                多盈数科专注大宗建材行业，致力于成为可持续信赖的产业数字化合作伙伴，赋能产业供应链，提供一站式的咨询、建设、运营和服务的产业链生态数字化转型、数字经济体解决方案。
              </p>
              <div class="text-footer">
                <span class="text1 text-span"
                  >企业热线：<span style="color: #f10000">400-656-5308</span></span
                >
                <span class="text2 text-span"
                  >售前电话：<span style="color: #f10000">15201019860</span></span
                >
              </div>
            </div>
          </div>
          <ul class="flex-col">
            <li v-for="(item, index) in infoList" :key="index" class="msg-item flex-col">
              <div v-if="item.flag == 'counterpart'" class="counterpart-box">
                <p class="text-user">{{ item.userName }}</p>
                <div class="msg-info">{{ item.msg }}</div>
              </div>
              <div v-else class="own-box flex-col">
                <p class="text-user">{{ item.userName }}</p>
                <div class="msg-info">{{ item.msg }}</div>
              </div>
            </li>
          </ul>
        </div>
      </el-scrollbar>
      <div class="chatService-footer">
        <el-scrollbar height="66px">
          <el-input
            v-model="textarea"
            type="textarea"
            placeholder="请输入"
            class="text-insert"
            @keydown.enter="toSend"
          />
        </el-scrollbar>
        <div class="send-btn"><span class="text-btn" @click="toSend">发送</span></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
const newDate = dayjs(`${new Date()}`).format('YYYY-MM-DD HH:mm:ss')

const infoList = ref([])

setTimeout(() => {
  infoList.value.push({
    flag: 'counterpart',
    userName: '链盈智能客服',
    msg: '您好，很高兴为您服务，请问有什么可以帮您？'
  })
}, 1000)

const textarea = ref('')
const scrollbarRef = ref(null)

const toSend = () => {
  if (!textarea.value) {
    return
  }
  infoList.value.push({
    flag: 'own',
    userName: '我',
    msg: textarea.value
  })
  textarea.value = ''
  setTimeout(() => {
    infoList.value.push({
      flag: 'counterpart',
      userName: '链盈智能客服',
      msg: '请添加客服微信'
    })
    nextTick(() => {
      scrollbarRef.value.setScrollTop(scrollbarRef.value.wrapRef.scrollHeight)
    })
  }, 100)
}
/** 关闭当期标签页 */
const closePage = () => {
  window.opener = null
  window.open('about:blank', '_top').close()
}
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
.chatService {
  width: 100%;
  height: 100%;
  background: url('../assets/images/chatService-bg.png') no-repeat;
  background-size: 100% 100%;

  &-wapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 800px;
    height: fit-content;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 16px 0 rgb(221 221 221 / 52%);

    .chatService-header {
      height: 70px;
      padding: 0 24px;
      background: #009cff;
      border-radius: 10px 10px 0 0;

      .left-title {
        .title-icon {
          width: 42px;
          height: 42px;
          margin-right: 10px;
        }

        .text-title {
          font-family: PingFangSC-Medium, 'PingFang SC';
          font-size: 20px;
          font-weight: 500;
          line-height: 28px;
          color: #fff;
        }
      }

      .right-box {
        width: 97px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 8px;

        .btn-text {
          font-family: PingFangSC-Regular, 'PingFang SC';
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
          color: #fff;
        }
      }
    }

    .chatService-body {
      padding: 24px;
      background: rgb(255 255 255 / 100%);

      .text-title {
        width: fit-content;
        padding: 8px;
        margin: 0 auto;
        margin-bottom: 24px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-size: 12px;
        font-weight: 400;
        color: #666;
        background: #f4f7fa;
        border-radius: 4px;
      }

      .text-user {
        margin-bottom: 2px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #666;
      }

      .msg-info {
        width: fit-content;
        max-width: 625px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: #eff3f6;
        border-radius: 0 8px 8px;

        span {
          font-family: PingFangSC-Regular, 'PingFang SC';
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #333;
        }
      }

      .msg-item {
        .own-box {
          margin-left: auto;

          .text-user {
            align-self: flex-end;
          }
        }
      }

      .font-facing-info {
        .msg-info {
          .info-text1 {
            margin-bottom: 30px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #000;
          }

          .text-footer {
            .text-span {
              font-family: PingFangSC-Regular, 'PingFang SC';
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
              color: #000;
            }

            .text1 {
              margin-right: 24px;
            }
          }
        }
      }
    }

    .chatService-footer {
      padding: 30px 0 16px 25px;
      background: #fff;
      border-top: 1px solid #eff3f6;

      .text-insert {
        height: 66px;

        :deep(.el-textarea__inner) {
          box-shadow: none;
          resize: none;
        }
      }

      .send-btn {
        width: 89px;
        height: 36px;
        margin-right: 24px;
        margin-left: auto;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        background: #009cff;
        border-radius: 4px;

        .text-btn {
          font-family: PingFangSC-Regular, 'PingFang SC';
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #fff;
        }
      }

      :deep(.el-textarea) {
        /* 滚动条整体部分 */
        .el-textarea__inner::-webkit-scrollbar {
          width: 7px;
          height: 7px;
        }

        /* 滚动条的轨道 */
        .el-textarea__inner::-webkit-scrollbar-track {
          background-color: #fff;
        }

        /* 滚动条里面的小方块，能向上向下移动 */
        .el-textarea__inner::-webkit-scrollbar-thumb {
          background-color: rgb(144 147 153 / 30%);
          border: 1px solid #f1f1f1;
          border-radius: 5px;
          box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
        }

        .el-textarea__inner::-webkit-scrollbar-thumb:hover {
          background-color: rgb(144 147 153 / 30%);
        }

        .el-textarea__inner::-webkit-scrollbar-thumb:active {
          background-color: rgb(144 147 153 / 30%);
        }

        /* 边角，即两个滚动条的交汇处 */
        .el-textarea__inner::-webkit-scrollbar-corner {
          background-color: #fff;
        }
      }
    }
  }
}
</style>
